<!-- 
	/**
	 * All rights Reserved, Designed By www.youyacao.com <br>
	 * @Description:新闻首页 <br>
	 * @version 蜻蜓Q系统  <br>
	 * @author:成都市一颗优雅草科技有限公司  <br>
	 * 注意：使用我司开源源代码请遵循license文件的协议仅供个人非盈利使用，禁止用于其他的商业用途
	 * 需要商业用途或者定制开发等可访问songshu.youyacao.com  联系QQ:2853810243 422108995 23625059584
	 * 正版系统查询系统 zhengbancha.youyacao.com
	 */
 -->


<template>
	<view class="content-more">
	
		 <view class="search">
			 <view class="search-content">
				 	<u-search bg-color="#221861" placeholder="请输入内容" v-model="keyword" :showAction="true" actionStyle="search" height="60"></u-search>
			 </view>
			  <view class="search-btn" @click="fabu">
				   <view class="search-add">
					  <image src="../../static/release.png" style="width: 50rpx; height: 50rpx;display: inline-block;" mode="aspectFill"></image>
				   </view>
				   <!-- <view class="search-text">发布</view> -->
			  </view>
		 </view>
		 <view class="menu-content">
			 	<u-tabs :list="tabsList"  active-color="#FFFFFF" height="60" gutter="15" :current="current" @change="change" style="background-color: #190934;"></u-tabs>
			
		 
		 </view>
		<view class="content">
			
				  <view  class="c-title m-botton" v-for="item in list" @click="details(item.id,item)">
				  			  <view class="n-title botton">{{item.title}}</view>
				  			   <view class="label-list" style=" width: 100%; display: flex;">
				  				
				  				    <view>作者 :<text v-if="item.user">{{item.user.nickname}}</text></view>
				  					<view>时间 :{{item.created_at}}</view>
				  			   </view>
				  </view>
				  
			<!-- 	  <view class="c-item-img-list m-botton">
					  <view  class="c-title c-item-left">
					  			  <view class="n-title">外媒关注：中国多地遭受强大热浪袭击</view>
					  			   <view class="label-list">
					  				    <view>置顶</view>
					  				    <view>新华网</view>
					  					<view>评论</view>
					  			   </view>
					  </view>
					  <view class="c-item-img"></view>
				  </view>
				   <view class="c-img-list m-botton">
					   <view class="n-title botton">习近平这些倡议为世界互联网发展凝聚合力</view>
						<view class="c-img-list-content">
							 <view class="c-i-l-img"></view>
							 <view class="c-i-l-img"></view>
							 <view class="c-i-l-img"></view>
						</view>
				   </view> -->
		</view>
<!-- 		<view class="nav-bar">
			<nav-bar></nav-bar>
		</view> -->
	</view>
</template>

<script>
	import NavBar from '@/components/v-tabbar/v-tabbar.nvue'
import {newsList,getNewsList} from '@/common/api.js'
	export default {
			components: {NavBar},
		data() {
			return {
				current: 0,
				list:[],
				tabsList:[],
				keyword:"",
				id:"",
				pageSize:{
					category_id:"1",
				}
			};
		},
		
		onShow() {
			this.getFenlei();
			this.getList();
		},
		methods: {
			
			change(e){
				this.current=e;
				this.id=this.tabsList[e].id
				this.pageSize.category_id=this.id
				this.getList();
			},
			fabu(id){
				// uni.navigateTo({
				// 	url: '/pages/newsList/upload?id='+this.id+''
				// });
				uni.navigateTo({
					url: '/pages/upload-video/upload-video'
				})
			},
			details(id,item){
				
				uni.navigateTo({
					url: '/pages/newsList/details?id='+id+'&info='+JSON.stringify(item.user)
				});
			},
			getList(){
				
				getNewsList(this.pageSize).then(res=>{
					if(res.code==200){
					this.list=res.data
					}
					
				})
			},
			onPullDownRefresh(){
					uni.stopPullDownRefresh()
			},
			getFenlei(){
				newsList().then(res=>{
					this.tabsList=res.data
		     		this.id=this.tabsList[0].id
				})
			},
		}
	}
</script>

<style>
	.content-more{
	
	}
	.nav-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		/* background-color: #fff; */
	}
	page{
		background-color: #fff;
	}
	.menu-content{
		height: 80rpx;
	}
	.content{
		padding-left: 30rpx;
		padding-right: 30rpx;
		/* padding-top: 20rpx; */
	}
	.c-title{
		/* margin-bottom: 30rpx; */
	}
	.n-title{
	    color: #D9D9D9;
	    font-size: 36rpx;
	    /* line-height: .5rem; */
	}
	.label-list{
		width: 240rpx;
		display: flex;
		    color: #999;
			font-size: 24rpx;
		justify-content: space-between;
	}
	.c-item-img-list{
		display: flex;
		justify-content: space-between;
	}
	.c-item-left{
		width: 410rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.c-item-img{
		height: 170rpx;
		width: 190rpx;
		background-color: red;
	}
	 .m-botton{
		 margin-bottom: 30rpx;
		  /* margin-top: 30rpx; */
	 }
	.botton{
		margin-bottom: 20rpx;
	}
	.c-img-list-content{
		display: flex;
		justify-content: space-between;
		
	}
	.c-img-list-content .c-i-l-img{
		width: 33%;
		height: 160rpx;
		background-color: red;
	}
	.search{
		/* padding-top: 80rpx; */
		padding-bottom:10rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		background-color: #190934;
		display: flex;
		justify-content: space-between;
	}
	.search-content{
		
		width: 90%;
	}
	.search-add{
		color: red;
		text-align: center;
		width: 80rpx;
		height: 50rpx;
		line-height: 52rpx;
		/* border-radius: 50%; */
		/* background-color: #fff; */
		font-size: 20rpx;
		color: red;
	}
	.search-btn{
		text-align: center;
	}
	.search-text{
		font-size: 20rpx;
		color: #fff;
	}
</style>
